"""
@author: Gaoyaoxia
@date: 2021-03-04 17:06:35
"""
<!-- 高级查询 -->
<template>
  <div class="drawer" v-show="show">
    <div class="search-form" :class="{ active: active, close: close }">
      <h3>高级查询</h3>
      <slot></slot>
      <div class="search-switch">
        <i class="suncnui suncnui-icon-prev-1" @click="closeDrop"></i>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    show: {
      type: Boolean,
      default: false
    },
    active: {
      type: Boolean,
      default: false
    },
    close: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {}
  },
  computed: {},
  watch: {},
  mounted() {},
  methods: {
    //高级检索表单收起事件
    closeDrop() {
      this.$emit('closeDrop')
    }
  },
  created() {}
}
</script>
<style lang='less' scoped>
//高级查询动画样式
.drawer {
  background: #fff;
  .search-form {
    width: 100%;
    height: 0px;
    padding-bottom: 20px;
    position: relative;
    background: #fff;
    h3 {
      margin-bottom: 5px;
      padding: 16px 10px 0px 10px;
      font-size: 16px;
      line-height: 34px;
      font-weight: bold;
      color: #000000;
    }
    .search-switch {
      width: 100%;
      margin-top: 8px;
      line-height: 34px;
      text-align: center;
      color: #1c8de8;
      i {
        cursor: pointer;
        font-size: 20px;
        display: inline-block;
        animation: arrow 0.7s linear infinite normal;
      }
    }
  }
  @keyframes arrow {
    from {
      margin-top: 5px;
    }
    to {
      margin-top: 0px;
      opacity: 0;
    }
  }
  // 开
  .active {
    animation: open 0.3s normal both;
  }
  @keyframes open {
    from {
      height: 0;
      top: 0px;
    }
    to {
      top: -49px;
      height: 200px;
    }
  }
  // 关
  .close {
    animation: close 0.3s normal both;
  }
  @keyframes close {
    0% {
      height: 200px;
      top: -49px;
    }
    100% {
      top: 0px;
      height: 0;
      opacity: 0;
    }
  }
}
</style>